<template>
  <div id="app" class="content">
    <img src="./assets/img/g1.gif" class="img" />
    <h1 class="title">小姐姐，我喜欢你！</h1>
    <h1 class="title">和我在一起吧!</h1>
    <div>
      <h3
        :class="['say-love', index < activeIndex ? '' : 'hidden']"
        v-for="(item, index) in love"
        :key="index"
      >{{item}}</h3>
    </div>
    <van-popup v-model="popup" :close-on-click-overlay="false" :overlay="false">
      <van-button type="primary">在一起呀</van-button>
      <van-button type="default">我不</van-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      popup: true,
      activeIndex: 0,
      list: [],
      love: [
        '小姐姐，我喜欢你!',
        ', I love you! (英语)',
        '王語嫣、愛しています (日语)',
        'Wang Yuyan, ich liebe dich! (德语)',
        'Ван Цзюнь, я люблю тебя! (俄语)',
        'Wang Yuyan, ti amo! (意大利语)',
        '¡Wang yuyan, te amo! (西班牙语)',
        '왕언언,나 사랑해요! (韩语)',
        'Wang Yuyan, jeg elsker dig! (丹麦语)',
        'Wang Yuyan, σ \'αγαπώ! (希腊语)'
      ],
      timer: null
    }
  },
  methods: {
    sayLove () {
      this.timer = setInterval(() => {
        this.activeIndex++
        if (this.activeIndex > this.love.length) {
          this.activeIndex = 0
        }
      }, 2000)
    }
  },
  mounted () {
    this.sayLove()
  },
  destroyed () {
    this.timer = null
  }
}
</script>

<style lang="less">
.content {
  position: relative;
  padding: 10px 20px;
  .img {
    width: 100%;
  }
  .title {
    padding: 5px;
    text-align: center;
  }
  .say-love {
    padding: 10px;
    color: #333;
    font-size: 18px;
  }
  .hidden {
    display: none;
  }
}
</style>

